<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      height: 200px;
      margin-left: 50px;
      margin-top: 60px;
    }

    .boxs {
      width: 300px;
      height: 300px;
      display: inline-block;
      margin-left: 100px;
    }

    .a1 {
      display: inline-block;
    }

    .box {
      width: 500px;
      height: 500px;
      background-color: aliceblue;
      margin: auto;
    }

    .a {
      margin-left: 100px;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script>
    var a = localStorage.getItem('data')
    var b = JSON.parse(a)
    b.forEach(item => {
      $('.box').append(`
       <div class='boxs'>
         <img src="${item.img}""><br>
         <span class="a">${item.name}</span>
         <span>￥:${item.pic}</span>
         <button onclick='add(${item.id})'>添加购物车</button>
       </div>
      `)
    });

    function add(id) {
      var a = JSON.stringify(b)
      localStorage.setItem('data', a)
      location.assign('./2.28.购物车.html')
    }
  </script>
</body>

</html>